<template>
  <div :style="{width: 3*width + 'px', paddingTop: width / 1.5 + 'px'}" class="mswiper">
    <ul :style="{width: maxLength + 'px', marginLeft: marginLeft + 'px', transitionDuration}">
      <li
        :class="{big: index == bigIndex}"
        :style="{transitionDuration, width: (index == bigIndex ? 2 * width : width) + 'px', marginTop: (index == bigIndex ? -width / 1.5 : 0) + 'px'}"
        v-for="(item, index) in newgoods"
        :key="index"
      >
        <img :src="item.image" />
        <div :style="{transitionDuration, opacity: index == bigIndex ? 1 : 0}" class="info">
          <div class="title">{{item.goods_name}}</div>
          <div class="price">{{item.price}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transitionDuration: "0.5s", // 动画运行时间
      interval: 4000, // 一次轮换间隔时间
      timer: null, // 定时器
      marginLeft: -3.5 * 96.3333, // 当前移动的位置
      bigIndex: 4, // 放大的格子下标
      width: 96.3333, // 每个格子的宽度
      goods: [
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "倒数第4个",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name:
            "倒数第3个",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "倒数第2个",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name: "倒数第1个",
          price: "1299",
          seckill_price: "998"
        },
        {
          image:
            "https://img14.360buyimg.com/mobilecms/s280x280_jfs/t1/109462/23/8475/126113/5e68bfe1Efb78edbf/e9115266a24acdef.jpg.webp",
          goods_name: "正数第1个",
          price: "2399",
          seckill_price: "1699"
        },
        {
          image:
            "https://img20.360buyimg.com/mobilecms/s280x280_jfs/t1/88555/36/15320/136982/5e6f2666E6a53f69a/dba634691083d4ca.jpg.webp",
          goods_name: "正数第2个",
          price: "1299",
          seckill_price: "998"
        }
      ]
    };
  },
  computed: {
    // 计算总长度
    maxLength: function() {
      // 商品数量的格子 + 左右多出的6个格子 + 一个放大的格子
      return this.goods.length * this.width + 6 * this.width + this.width;
    },
    // 商品数组重新计算
    newgoods: function() {
      // 复制前3件商品
      let f3 = this.goods.slice(0, 3);
      // 复制后3件商品
      let l3 = this.goods.slice(this.goods.length - 3, this.goods.length);
      // 与原数组一起合并 后3件 + 原数组 + 前3件
      return [...l3, ...this.goods, ...f3];
    }
  },
  mounted() {
    this.timer = setInterval(this.left, this.interval);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    // 向左移动一张图片
    left() {
      // 向左移动一个格子
      this.marginLeft -= this.width;
      // 大格子的下标 ++
      this.bigIndex++;
      // 判断是否是最后一个
      if (
        this.marginLeft <=
        -this.goods.length * this.width - 3.5 * this.width
      ) {
        // 0.5秒滚动完之后执行
        setTimeout(() => {
          // 关闭过渡
          this.transitionDuration = "0s";
          // 切换到初始位置
          this.marginLeft = -3.5 * this.width;
          // 重新设置大图片的下标
          this.bigIndex = 4;
          // 延迟一会再打开过渡
          setTimeout(() => {
            this.transitionDuration = "0.5s";
          }, 100);
        }, 500);
      }
    }
  }
};
</script>

<style lang="scss">
.mswiper {
  height: 251px;
  background-image: url("https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/36953637b4e5fc27d860e53362a93e76.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: -30px;
  overflow: hidden;
  ul,
  li,
  .info {
    transition: all;
  }
  .info {
    width: 150%;
    margin-left: -25%;
    margin-top: 20px;
    .title {
      white-space: nowrap;
      font-size: 16px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .price {
      padding: 10px 0;
      color: red;
      font-size: 16px;
      font-weight: bold;
    }
  }
  li {
    float: left;
    text-align: center;
    img {
      width: 100%;
    }
  }
  .big {
    padding: 0 15px 0;
  }
}
</style>